<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 & CSS3 前端项目</title>
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
    <header class="site-header">
        <div class="container">
            <h1>我的前端项目</h1>
            <nav>
                <ul>
                    <li><a href="#home">首页</a></li>
                    <li><a href="#about">关于</a></li>
                    <li><a href="#services">服务</a></li>
                    <li><a href="#contact">联系我们</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <section id="home" class="hero-section">
            <div class="container">
                <h2>欢迎来到我的网站</h2>
                <p>这是一个基于HTML5和CSS3构建的现代化前端项目</p>
                <a href="#services" class="btn">了解更多</a>
            </div>
        </section>

        <section id="about" class="about-section">
            <div class="container">
                <h2>关于我们</h2>
                <p>我们是一个专注于提供高质量前端解决方案的团队，使用最新的HTML5、CSS3和JavaScript技术为客户创建出色的用户体验。</p>
            </div>
        </section>

        <section id="services" class="services-section">
            <div class="container">
                <h2>我们的服务</h2>
                <div class="services-grid">
                    <div class="service-item">
                        <h3>响应式设计</h3>
                        <p>为所有设备创建流畅的用户体验</p>
                    </div>
                    <div class="service-item">
                        <h3>现代UI设计</h3>
                        <p>打造美观且易用的界面</p>
                    </div>
                    <div class="service-item">
                        <h3>性能优化</h3>
                        <p>确保网站快速加载和运行</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="contact" class="contact-section">
            <div class="container">
                <h2>联系我们</h2>
                <form id="contact-form">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="email" id="email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="message">留言</label>
                        <textarea id="message" name="message" required></textarea>
                    </div>
                    <button type="submit" class="btn">提交</button>
                </form>
            </div>
        </section>
    </main>

    <footer class="site-footer">
        <div class="container">
            <p>&copy; 2024 我的前端项目. 保留所有权利.</p>
        </div>
    </footer>

    <script src="assets/js/main.js"></script>
</body>
</html>